<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="header.jsp" flush="true" />
<title>Bid-Market</title>
</head>
<body>
	<div class="col-md-offset-1 col-md-10 ">
		<div class="panel panel-default">
			<div class="panel-heading">Following</div>
			<table class="table table-bordered able table-hover">
				<thead>
					<tr>
						<th class="col-sm-2" style="text-align: center">photo</th>
						<th class="col-sm-2" style="text-align: center">Name</th>
						<th class="col-sm-6" style="text-align: center">Description</th>
						<th class="col-sm-1" style="text-align: center">Price</th>
					</tr>
				</thead>
				<tbody>
					<%
						ArrayList<String> products = (ArrayList<String>) session.getAttribute("productsOfBidList");
						for(int i=0; i<products.size(); i+=5){
					%>
					<tr row-key=<%out.print(products.get(i)); %>>
						<td style="text-align: center; vertical-align: middle; "><img
							src=" <%out.print(products.get(i+1));%>" style="max-height:100px" alt="productPhoto"
							class="img-thumbnail"></td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(products.get(i+2));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(products.get(i+3));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(products.get(i+4));
							%>
						</td>
					</tr>
					<%
						}
					%>
				</tbody>
			</table>
		</div>
	</div>
	<div class="col-md-offset-1 col-md-10 ">
		<div class="panel panel-default">
			<div class="panel-heading">My Products</div>
			<table class="table table-bordered able table-hover">
				<thead>
					<tr>
						<th class="col-sm-2" style="text-align: center">photo</th>
						<th class="col-sm-2" style="text-align: center">Name</th>
						<th class="col-sm-6" style="text-align: center">Description</th>
						<th class="col-sm-1" style="text-align: center">Price</th>
					</tr>
				</thead>
				<tbody>
					<%
						ArrayList<String> myProducts = (ArrayList<String>) session.getAttribute("myProducts");
						for(int i=0; i< myProducts.size(); i+=5){
					%>
					<tr row-key=<%out.print( myProducts.get(i));%> >
						<td style="text-align: center; vertical-align: middle;"><img
							src=" <%out.print( myProducts.get(i+1));%>" style="max-height:100px" alt="productPhoto"
							class="img-thumbnail"></td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print( myProducts.get(i+2));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print( myProducts.get(i+3));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print( myProducts.get(i+4));
							%>
						</td>
					</tr>
					<%
						}
					%>
				</tbody>
			</table>
		</div>
	</div>
	
	
		<div class="col-md-offset-1 col-md-10 ">
		<div class="panel panel-default">
			<div class="panel-heading">Sold Products</div>
			<table class="table table-bordered able table-hover">
				<thead>
					<tr>
						<th class="col-sm-2" style="text-align: center">photo</th>
						<th class="col-sm-2" style="text-align: center">Name</th>
						<th class="col-sm-6" style="text-align: center">Description</th>
						<th class="col-sm-1" style="text-align: center">Price</th>
					</tr>
				</thead>
				<tbody>
					<%
						ArrayList<String> mySoldProducts = (ArrayList<String>) session.getAttribute("mySoldProducts");
						for(int i=0; i<mySoldProducts.size(); i+=5){
					%>
					<tr row-key=<%out.print(mySoldProducts.get(i));%>>
						<td style="text-align: center; vertical-align: middle;"><img
							src=" <%out.print(mySoldProducts.get(i+1));%>" alt="productPhoto"
							class="img-thumbnail" style="max-height:100px"></td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(mySoldProducts.get(i+2));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(mySoldProducts.get(i+3));
							%>
						</td>
						<td style="text-align: center; vertical-align: middle;">
							<%
								out.print(mySoldProducts.get(i+4));
							%>
						</td>
					</tr>
					<%
						}
					%>
				</tbody>
			</table>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			$('.table-hover tr').click(function() {
				var rowId = $(this).attr("row-key");
				url = "/BidMarket/ProductController/" + rowId;
				window.location.replace(url);
				//alert(url);
			});
		});
	</script>
</body>
</html>